<template>
  <div class="main">
    <div class="main-box">
      <div class="visual-box">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { initAutoScale } from '@/utils'
export default {
  name: 'BlankLayout',
  components: {},
  data() {
    return {
      menuArr: [],
      // 大屏路由前缀
      routerPrefix: 'visual',
      nowRouterTitle: '',
      menuLeft: 0,
      menuFlag: 0,
      menuShowFlag: true,
      maxNum: 1,
      leftMenuArr: [],
      rightMenuArr: [],
      nowRouterName: '',
      pageMax: 1,
      bottomMenuArr: [
        {
          name: '数说东营',
          children: []
        },
        {
          name: '经济运行',
          children: []
        },
        {
          name: '安全风险',
          children: []
        },
        {
          name: '城市治理',
          children: []
        },
        {
          name: '社会民生',
          children: []
        },
        {
          name: '中枢体系',
          children: []
        }
      ],
      activeBottomMenuIndex: -1,
      // 当前页码
      menuPage: 1
    }
  },
  mounted() {
    this.nowRouterTitle = this.$route.meta.title
    if (process.env.NODE_ENV !== 'development') {
      const { query } = this.$route
      if (query.type === '1') return
      initAutoScale({
        cwidth: _const.screenOriginalDesignSize.width,
        cheight: _const.screenOriginalDesignSize.height,
        mainBox: '.main-box',
        main: '.main'
      })
    }
  },
  watch: {
    $route(to, from) {
      setTimeout(() => {
        this.init()
      }, 200)
    }
  },
  methods: {
    createMenuArr() {
      // 顶部六大领域
      this.menuArr = this.bottomMenuArr
      this.leftMenuArr = this.menuArr.slice(0, 3)
      this.rightMenuArr = this.menuArr.slice(3, 6)
      // 底部子专题
      const { routes } = this.$router.options
      this.bottomMenuArr.map((item) => {
        item.children = []
      })
      routes[1].children.map((router) => {
        const { category } = router.meta
        const item = this.bottomMenuArr.find((menu) => menu.name === category)
        if (item) {
          item.children.push({
            name: router.name,
            title: router.meta.title
          })
        }
      })
    },
    init() {
      this.nowRouterName = this.$route.name
      const index = this.bottomMenuArr.findIndex((item) => {
        const routerIndex = item.children.findIndex((router) => router.name === this.$route.name)
        if (routerIndex !== -1) {
          this.menuPage = Math.ceil((routerIndex + 1) / 4)
        }
        return routerIndex !== -1
      })

      this.activeBottomMenuIndex = index
    },
    gotoMenu(item) {
      if (this.nowRouterName !== item.name) {
        this.$router.push({
          name: item.name,
          query: {}
        })
      }
    },
    selectCategory(index) {
      if (index === this.activeBottomMenuIndex) return
      this.activeBottomMenuIndex = index
      this.menuPage = 1
      this.gotoPage(this.menuPage)
      let goTitle = this.bottomMenuArr[index].children[0]
      this.gotoMenu(goTitle)
    },
    gotoPage(index) {
      this.menuPage = index
    },
    menuPrev() {
      this.leftMenuArr = []
      this.rightMenuArr = []
      if (this.menuPage > 0) {
        this.menuPage--
        let page = this.menuPage
        this.leftMenuArr = this.menuArr.slice(page * 3, (page + 1) * 3)
        this.rightMenuArr = this.menuArr.slice((page + 1) * 3, (page + 2) * 3)
        this.$nextTick(() => {
          $('.main-header>.menu-left>.left-item, .main-header>.menu-right>.right-item')
            .removeClass('animate__bounceInDown')
            .addClass('animate__bounceInDown')
        })
      }
    },
    menuNext() {
      this.leftMenuArr = []
      this.rightMenuArr = []
      if (this.menuPage < this.pageMax) {
        this.menuPage++
        if (this.menuPage == 1) {
          this.leftMenuArr = this.menuArr.slice(6, 9)
          this.rightMenuArr = this.menuArr.slice(9, 12)
        } else {
          this.leftMenuArr = this.menuArr.slice(12, 14)
        }
        this.$nextTick(() => {
          $('.main-header>.menu-left>.left-item, .main-header>.menu-right>.right-item')
            .removeClass('animate__bounceInDown')
            .addClass('animate__bounceInDown')
        })
      }
    }
  }
}
</script>

<style lang="scss">
@import '~@/style/basic.scss';
@import '~@/style/mixin.scss';
</style>
<style lang="scss" scoped>
.main {
  .main-box {



    .visual-box {
      padding: 20px;
    }

  }

}
</style>
<style lang="scss">
/*fade*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/*fade-transform*/
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/*fade-transform-long*/
.fade-transform-long-leave-active,
.fade-transform-long-enter-active {
  transition: all 1s;
}

.fade-transform-long-enter {
  opacity: 0;
  transform: translateX(-60px);
}

.fade-transform-long-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

/*breadcrumb transition*/
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}
</style>
